<template>
  <div class="nav-box">
    <div class="nav-name">
      <div class="navname" @click="goHome">休了个游</div>
      <div class="navimg">
        <img @click="goHome" src="../../assets/img/logo2.png" alt="" />
      </div>
    </div>

    <div class="nav-list">
      <ul>
        <li v-for="(item, index) in message" :key="index">
          <span @click="goPage(item.url)">{{ item.name }}</span>
        </li>
      </ul>
    </div>

    <div class="querymessage">
      <input
        class="search_input"
        type="text"
        v-model="select"
        @change="selectGame"
        @focus="dispalyHistory"
        placeholder="请输入你要查找的游戏"
      />
      <i class="el-icon-search" @click="selectGame"></i>

      <div
        :class="{ searchs: searchHistory }"
        class="search_history"
        @click.stop="cliSear"
      >
        <div class="searhis_top">
          <div>搜索记录</div>
          <div @click.stop="searhisAllDel">清空</div>
        </div>

        <div v-if="searBear" class="searhis_list">
          <div
            class="searhis_item"
            v-for="(item, index) in userSearchList"
            :key="index"
            @click.stop="getItemGo(item)"
          >
            {{ item }}
            <div class="searhis_del" @click.stop="getItemDel(item)">
              <img src="../../assets/img/chas.svg" alt="" />
            </div>
          </div>
        </div>
        <div v-else class="searhis_none">暂无搜索记录</div>
      </div>
    </div>

    <div class="nav-right">
      <div class="nav-my">
        <div v-if="login != null && login != 'null'">
          <img
            :src="user.uimg"
            alt=""
            @click="goMy"
            @mouseenter="changTrue"
            @mouseleave="changFalse"
          />
          <span
            @click="goMy"
            @mouseenter="changTrue"
            @mouseleave="changFalse"
            >{{ user.uname }}</span
          >
        </div>
        <div v-else>
          <span @click="ulogin">登录</span>
        </div>
      </div>

      <div
        class="nav-users"
        :class="{ usersdisply: displayChile }"
        @mouseenter="changTrue"
        @mouseleave="changFalse"
      >
        <div @click="goMy">个人中心</div>
        <div @click="ulogin">切换用户</div>
        <div @click="userOut">退出登录</div>
      </div>
    </div>
  </div>
</template>

<script>
import { userMessage } from "../../network/usermes";

export default {
  name: "Navigation",
  data() {
    return {
      message: [
        { name: "首页", url: "/home" },
        { name: "游戏库", url: "/gamelibrary" },
        { name: "排行榜", url: "/rankinglist" },
      ],
      user: "",
      select: "",
      login: this.$Cookie.get("userid"),
      displayChile: false,
      userSearchList: [], //存放搜索历史记录
      searBear: true, //判断搜索记录是否为空
      searchHistory: false, //判断是否展示搜索记录
    };
  },
  created() {
    this.userMessage();

    this.getSearchList();
  },

  mounted() {
    //监听是否点击了搜索记录框外
    document.addEventListener("click", (e) => {
      console.log(e.target.className !== "searchs");
      if (e.target.className !== "search_input") {
        this.searchHistory = false;
      }
    });
  },

  computed: {
    monitor() {
      return this.$store.state.userUpdate;
    },
  },

  watch: {
    monitor() {
      this.userMessage();
    },
  },

  methods: {
    userMessage() {
      if (this.login != null && this.login != "null") {
        this.message.push({ name: "我的", url: "/mymessage" });
        userMessage(this.login).then((res) => {
          this.user = res.data.data;
        });
      }
    },
    goPage(url) {
      this.$router.push(url);
    },
    ulogin() {
      this.$router.push("/login2");
    },

    getSearchList() {
      if (localStorage.getItem("search_history") == null) {
        this.searBear = false;
      } else {
        this.userSearchList = localStorage.getItem("search_history").split(",");
      }
    },

    selectGame() {
      this.$router.push({
        path: "/search",
        query: {
          keyName: this.select,
        },
      });

      if (this.userSearchList.length == 0) {
        //判断搜索记录是否为空，为空直接加
        this.userSearchList.push(this.select);
      } else {
        for (let i = 0; i < this.userSearchList.length; i++) {
          //遍历数组判断新的搜索值是否存在，存在及将元素置首，不存在直接加置首
          if (this.userSearchList.indexOf(this.select) == -1) {
            this.userSearchList.unshift(this.select);
          } else if (this.userSearchList.indexOf(this.select) == i) {
            let repeatSear = this.userSearchList.splice(i, 1).toString();
            this.userSearchList.unshift(repeatSear);
          }
        }
      }
      localStorage.setItem("search_history", this.userSearchList);
      location.reload();
    },

    goHome() {
      this.$router.push("/home");
    },

    goMy() {
      this.$router.push("/mymessage");
    },

    userOut() {
      this.$Cookie.remove("userid");
      this.$Cookie.remove("uadmin");
      this.$router.push("/home");
      location.reload();
    },

    changTrue() {
      this.displayChile = true;
    },
    changFalse() {
      this.displayChile = false;
    },

    getItemGo(value) {
      console.log(2);
      this.$router.push({
        path: "/search",
        query: {
          keyName: value,
        },
      });
      location.reload();
    },

    getItemDel(value) {
      if (this.userSearchList.length == 1) {
        //判断是否长度为一，是就清空，并显示提示
        this.userSearchList = "";
        this.searBear = false;
        localStorage.removeItem("search_history");
      } else {
        let k = this.userSearchList.indexOf(value);
        this.userSearchList.splice(k, 1);
        localStorage.setItem("search_history", this.userSearchList);
      }
    },

    searhisAllDel() {
      this.userSearchList = "";
      this.searBear = false;
      localStorage.removeItem("search_history");
    },

    dispalyHistory() {
      this.searchHistory = true;
    },
    cliSear() {
      this.searchHistory = true;
    },
  },
  // beforeDestroy() {
  //   //销毁监听点击事件
  //   window.removeEventListener("click", () => {}, true);
  // },
};
</script>

<style>
.nav-box {
  display: flex;
  flex: 1;
  height: 0.33rem;
  min-height: 50px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 15px 10px -15px rgb(196, 195, 194);
}

.nav-name {
  display: flex;
  flex: 1.2;
  justify-content: flex-end;
  align-items: center;
}

.navname {
  font-size: 0.115rem;
  margin-right: 5%;
}

.navname:hover {
  cursor: pointer;
}

.navimg {
  width: 25%;
  height: 80%;
  margin-right: 20%;
}

.nav-name img {
  width: 100%;
  height: 100%;
}

.nav-name img:hover {
  cursor: pointer;
}

.nav-list {
  display: flex;
  flex: 2;
}

.nav-list ul {
  list-style: none;
  display: flex;
  flex: 1;
  align-items: center;
}

.nav-list ul li span:hover {
  cursor: pointer;
  color: rgb(76, 197, 244);
}

.querymessage {
  position: relative;
  display: flex;
  flex: 1;
  height: 100%;
  align-items: center;
}

.search_history {
  position: absolute;
  width: 85%;
  left: 0;
  top: 85%;
  background-color: #fff;
  padding: 0.05rem 0.1rem 0.15rem 0.1rem;
  z-index: 99999;
  box-shadow: 0px 2px 4px #adacac;
  border-radius: 0.02rem;
  display: none;
}

.searhis_top {
  display: flex;
  justify-content: space-between;
}

.searhis_top div:nth-child(1) {
  font-size: 0.09rem;
}

.searhis_top div:nth-child(2):hover {
  color: rgb(0, 161, 214);
  cursor: pointer;
}

.searhis_list {
  display: flex;
  margin-top: 0.08rem;
  flex-wrap: wrap;
}

.searhis_item {
  position: relative;
  padding: 0.05rem 0.08rem;
  background-color: rgb(244, 244, 244);
  margin-left: 0.06rem;
  margin-top: 0.07rem;
  cursor: pointer;
  border-radius: 0.02rem;
}

.searhis_item:hover {
  color: rgb(0, 161, 214);
}

.searhis_item:hover .searhis_del {
  display: block;
}

.searhis_del {
  position: absolute;
  top: -25%;
  right: -5%;
  text-align: end;
  display: none;
}

.searhis_del img {
  width: 0.08rem;
}

.searhis_none {
  font-size: 0.09rem;
  margin: 0 auto;
  text-align: center;
  margin-top: 0.1rem;
}

.querymessage input {
  width: 100%;
  height: 60%;
  border-radius: 20px;
  padding-left: 3%;
  padding-right: 5%;
  background-color: rgb(240, 240, 240);
}

.querymessage input:focus {
  outline: none;
}

.querymessage input::-webkit-input-placeholder {
  font-size: 12px;
  line-height: 30px;
}

.querymessage i {
  position: relative;
  right: 25px;
  cursor: pointer;
}

.nav-right {
  position: relative;
  display: flex;
  flex: 1;
}

.nav-my {
  display: flex;
  flex: 1;
  align-items: center;
}

.nav-my div {
  display: flex;
  flex: 1;
  align-items: center;
  margin-left: 25%;
}

.nav-my div img {
  width: 0.25rem;
  height: 0.25rem;
  min-width: 43px;
  min-height: 43px;
  border-radius: 50%;
  margin-right: 3%;
  cursor: pointer;
}

.nav-my div span {
  cursor: pointer;
  height: 0.33rem;
  line-height: 0.33rem;
}

.nav-users {
  position: absolute;
  background-color: rgb(255, 255, 255);
  left: 25%;
  width: 0.8rem;
  height: 0;
  bottom: 0rem;
  text-align: center;
  font-size: 0.09rem;
  z-index: 9999;
  border-radius: 0 0 5px 5px;
  overflow: hidden;
  transition: all 0.3s;
  box-shadow: 0px 2px 4px #cecaca;
}

.usersdisply {
  height: 0.8rem;
  bottom: -0.8rem;
}

.nav-users div {
  height: 0.26rem;
  line-height: 0.26rem;
  background-color: white;
  cursor: pointer;
}

.nav-users :hover {
  background-color: rgb(244, 244, 244);
}

.searchs {
  display: block;
}
</style>
